<template>
    <div>
        <!--轮播-->
        <van-swipe :autoplay="3000" indicator-color="white" v-if="ads['pos-9']">
            <van-swipe-item v-for="(banner, index) in ads['pos-9']" :key="index" style="text-align: center">
                <img v-lazy="banner.url" style="max-width: 100%" @click="link(banner.link)">
            </van-swipe-item>
        </van-swipe>

        <div style="width: 100%;display: flex;flex-wrap:wrap;padding: 0 15px" v-if="ads['pos-10']">
            <div v-for="(channel, index) in ads['pos-10']" :key="index" style="width: 20%;padding: 15px 10px 0px;">
                <div @click="link(channel.link)">
                    <img v-lazy="channel.url" style="max-width: 100%;">
                </div>
            </div>
        </div>

        <van-row style="margin-top: 20px;">
            <van-col span="24">
                <div style="padding:0 10px 0 10px;" v-if="ads['pos-11'] && ads['pos-11'].length >= 2">
                    <van-col span="12" style="padding: 0 1px 0 0;">
                        <img v-lazy="ads['pos-11'][0].url"
                             @click="link(ads['pos-11'][0].link)"
                             style="width: 100%; background-color:#fff;border-radius: 5px">
                    </van-col>
                    <van-col span="12" style="padding: 0">
                        <div class="lrcont">
                            <img v-lazy="ads['pos-11'][1].url"
                                 @click="link(ads['pos-11'][1].link)"
                                 style="width: 100%; background-color:#fff;border-radius: 5px">
                        </div>
                    </van-col>
                </div>
            </van-col>
        </van-row>

        <!--尖货新品-->
        <P style="font-size: 20px; font-weight: bold;padding: 0px 10px 0 10px;color: #333333; margin-top: 10px">尖货新品</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">JUST DROPPED</p>

        <div style="width: 100%;box-sizing: border-box;padding: 10px 5px 10px 0;overflow: auto;overflow-x: scroll;white-space: nowrap;" v-if="ads['pos-23']">
            <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;margin-left:5px;" v-for="(item, index) in ads['pos-23']" :key="index" >
                <img style="width: 100%" v-lazy="item.url" @click="link(item.link)">
            </div>
        </div>

        <!-- 潮流黑化-->
        <P style="font-size: 20px; font-weight: bold;padding: 0 10px 0 10px;color: #333333;" v-if="ads['pos-19'] && ads['pos-19'].length > 0">潮流黑话</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 10px 10px" v-if="ads['pos-19'] && ads['pos-19'].length > 0">TREND TALK</p>

        <van-swipe :loop="true" :width="300" @change="onChange" style="padding-bottom: 10px" v-if="ads['pos-19'] && ads['pos-19'].length > 0">
            <van-swipe-item class="slide2" @click="link(channel.link)" v-for="(channel, index) in ads['pos-19']" :key="index" style="padding:0 10px;">
                <img v-lazy="channel.url" style="width: 100%">
            </van-swipe-item>

            <div class="custom-indicator" slot="indicator" style="text-align: right; padding: 0 10px;">
                {{ current + 1 }}/{{ads['pos-19'].length}}
            </div>
        </van-swipe>

        <!--为你推荐-->
        <P style="font-size: 20px; font-weight: bold;padding: 10px 10px 0 10px;color: #333333;">为你推荐</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">ELABORATE SELECTION</p>
        <div>
            <van-row>
                <van-col span="12" v-for="(newGood ,index) in goodsList"
                >
                    <div style=" padding:3px">
                        <div
                                :key="index"
                                style=" border-radius: 5px; background-color:#fff; overflow: hidden;padding: 5px"
                        >
                            <router-link :to="{ path: `/items/detail/${newGood.id}`}">
                                <img :src="newGood.picUrl" style="width: 100%;"/>
                                <p style="font-size: 12px; color: #999999; padding: 10px 0px 5px 10px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                    {{newGood.name && newGood ? newGood.name : ''}}</p>
                                <div style="padding:15px 0px 0px 10px;position: relative;bottom: 10px; color:#000; font-size: 13px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap">
                                    ￥{{newGood.retailPrice}}
                                    <span v-show="newGood.modelPrice">+{{newGood.modelPrice}}</span>
                                    <s style="color:#cccccc;float: right;position: relative;right: 1px;font-size: 12px">原价￥{{newGood.counterPrice}}</s>
                                </div>
                            </router-link>
                        </div>
                    </div>
                </van-col>
            </van-row>
        </div>

    </div>
</template>

<script>
    import Vue from 'vue'
    import {
        Swipe,
        SwipeItem
    } from 'vant';
    import { goodsList, adAll } from '@/api/api';

    Vue.use(Swipe).use(SwipeItem)

    export default {
        name: "shoes",
        data () {
            return {
                ads: {},
                goodsList: [],
                current: 0
            }
        },

        async created() {
            this.ads = await adAll('9,10,11,12,13,14,19,23');

            this.initViews();
        },

        methods: {
            link(path) {
                const newPath = 'http://' + path;
                window.location.href = newPath;
            },
            initViews() {
                this.getGoodsList('0', '女生')
            },

            onChange(index) {
                this.current = index;
            },

            getGoodsList(cates, gender){
                goodsList({
                    categoryId: cates,
                    gender: gender,
                    page: 1,
                    limit: 10
                }).then(res => {
                    this.goodsList = res.data.data.list;
                    this.loading = false;
                });
            },
        },

        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        }
    }
</script>

<style scoped>
    .scroll-slide {
        padding: 10px;
    }

    .scroll-slide img {
        width: 100%;
    }
</style>